<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-10-27 11:10:04
 * @LastEditTime: 2022-11-01 08:46:43
 * @FilePath: \vue3\src\views\index.vue
-->
<template>
    <div class="all-content">
        <header>
            <div class="header-class">
                <div class="header-content">
                    <ul>
                        <li class="select" v-for="item in tables.tabs" :key="item.id">
                            <div class="title">{{ item.name }}</div>
                            <!-- <div class="dis" v-for="child in item.child" :key="child.id">
                            {{ child.name }}
                        </div> -->
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <div class="body-class">
            <div class="left-class">
                <div class="person-card">
                    <div class="avatar">
                        <img class="my-avatar" :style="myrunning" @click="playOrStop">
                        <span class="avatar-name">小木头</span>
                    </div>
                    <div class="my-motto">逆水行舟,不进则退</div>
                    <div class="gitee-class">
                        <div class="gray-line"></div>
                        <a href="https://gitee.com/chenli_wow" target="_blank">
                            <div class="cangku"></div>
                        </a>
                        <div class="gray-line"></div>
                    </div>
                    <div class="gitee-class">
                        <div class="blue-block">js</div>
                        <div class="yellow-block">css</div>
                        <div class="green-block">vue</div>
                    </div>
                </div>
                <div class="articles">
                    <div v-for="item in tables.articles" :key="item.id" class="articles-item">
                        <div class="articles-content">
                            <div class="name-font">{{ item.name }}</div>
                            <div class="name-font">{{ item.number }}</div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="center-class">
                <router-view></router-view>
            </div>
            <div class="right-class">3</div>
        </div>
    </div>
</template>
<script setup>
/**
 * @module test
 */
import { reactive, ref } from "vue-demi";

let tables = reactive({
    tabs: [{
        name: '首页',
        id: 'tabs1',

    }, {
        name: '内容',
        id: 'tabs2',
        child: [
            { name: 'vue', id: 'tabs2101' },
            { name: 'js', id: 'tabs2102' },
            { name: 'css', id: 'tabs2103' },
            { name: 'android', id: 'tabs2104' },
        ]
    }],
    articles: [{
        name: 'js',
        number: 2,
        id: 'articles1'
    }, {
        name: 'css',
        number: 5,
        id: 'articles2'
    }, {
        name: 'vue',
        number: 13,
        id: 'articles3'
    },]
})
let durTims = ref('10s')
console.log(document.styleSheets)
let myrunning = ref('animation-play-state: running;')

let playOrStop = () => {
    if (myrunning.value == 'animation-play-state: running;') {
        myrunning.value = 'animation-play-state: paused;'
        console.log('animation-play-state: paused;')
    } else {
        myrunning.value = 'animation-play-state: running;'
        console.log('animation-play-state: running;')
    }
}
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.all-content {
    width: 100%;
    height: 100%;
    background-image: url('../assets/bg-cover.jpeg');
}

.header-class {
    width: 100%;
    height: 90px;
    background-image: url('../assets/top-cover.jpeg');
    background-size: cover;
    // position: relative;
    backdrop-filter: blur(10px);
    opacity: 0.8;
    text-align: center;
}

.header-content {
    display: flex;
    flex-direction: row;
    display: block;
    margin-right: 400px;
}

.select {
    float: right;
    list-style-type: none;
    color: #ffffff;
    padding: 5px;
    line-height: 80px;
    height: 90px;
    width: 90px;
    font-weight: 600;

    .title {
        color: #ffffff;
    }
}

.select:hover {
    background-color: rgb(183, 213, 238, 0.6);
}

.dis {
    // display: none;
    // position: absolute;
    // background-color: cadetblue;
    // padding: 5px;
    // margin-top: 5px;
    // margin-left: -5px;
    // background: rgba(255, 255, 255, 0.3);
}

.select:hover .dis {
    display: block;
}

.body-class {
    width: 100%;
    height: calc(100% - 90px);
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.left-class {
    width: 200px;
    height: 100%;
    overflow: auto;
    border-radius: 20px;

    // border: 1px #ffffff solid;
    .person-card {
        width: 190px;
        height: 300px;
        border-radius: 10px;
        border: solid 2px #ffffff;
        box-sizing: border-box;
        margin: 30px 5px 0px;
        background-color: #ffffff;
    }

    .avatar {
        width: 100%;
        height: 100px;
        background-size: cover;
        background-image: url('../assets/avatar-bg.jpeg');
        overflow: hidden;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

    }

    .my-avatar {
        width: 50px;
        height: 50px;
        background-size: cover;
        background-image: url('../assets/myavatar.jpg');
        overflow: hidden;
        border-radius: 25px;
        margin: 20px 5px;
    }

    .avatar-name {
        font-size: 24px;
        color: #000000;
        font-weight: 500;
    }

    .my-motto {
        width: 100%;
        text-align: right;
        color: grey;
        font-size: 18px;
        font-weight: 400;
        font-style: italic;
        padding: 5px 5px 0px 0px;
        text-shadow: 2px 2px 2px #9ac1f0;
        margin-top: 20px;
    }

    .gitee-class {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin: 0px auto;
    }

    .cangku {
        width: 30px;
        height: 30px;
        background-image: url('../assets/cangku.png');
        overflow: hidden;
        border-radius: 15px;
        margin: 10px 5px;
        background-size: cover;
    }

    .my-avatar:hover {
        box-shadow: 2px 2px grey;
        animation: avatar-animation 3s linear infinite;
        // animation: avatar-animation 3s linear;
        // animation-play-state: running;
        // animation: avatar-animation-wobble 1s linear infinite;
    }

    @keyframes avatar-animation {
        0% {
            transform: rotate(0deg) scale(1)
        }

        25% {
            transform: rotate(90deg) scale(1.5)
        }

        50% {
            transform: rotate(180deg) scale(2)
        }

        75% {
            transform: rotate(270deg) scale(1.5)
        }

        100% {
            transform: rotate(360deg) scale(1)
        }
    }


    @keyframes avatar-animation-wobble {
        0% {
            transform: rotate(0deg)
        }

        33% {
            transform: rotate(45deg)
        }

        66% {
            transform: rotate(-45deg)
        }

        100% {
            transform: rotate(0deg)
        }
    }

    .gray-line {
        width: 70px;
        height: 1px;
        background-color: #E8ECEC;
    }

    .blue-block {
        background-color: #9ac1f0;
        box-shadow: 2px 2px #E8ECEC;
        border: 1px #ffffff solid;
        border-radius: 5px;
        width: 50px;
        height: 70px;
        color: #ffffff;
        text-align: center;
        line-height: 70px;
    }

    .green-block {
        background-color: #72fa93;
        box-shadow: 2px 2px #E8ECEC;
        border: 1px #ffffff solid;
        border-radius: 5px;
        width: 50px;
        height: 70px;
        color: #ffffff;
        text-align: center;
        line-height: 70px;
    }

    .yellow-block {
        background-color: #f6c445;
        box-shadow: 2px 2px #E8ECEC;
        border: 1px #ffffff solid;
        border-radius: 5px;
        width: 50px;
        height: 70px;
        color: #ffffff;
        text-align: center;
        line-height: 70px;
    }

    .articles {
        width: 190px;
        height: 300px;
        border-radius: 10px;
        border: solid 2px #ffffff;
        box-sizing: border-box;
        margin: 10px 5px 0px;
        background-color: #ffffff;

        .articles-item {
            padding: 10px;
            width: 190px;
            margin: 0px auto;
            border-bottom: 5px transparent double;
        }

        .articles-item:hover {
            border-bottom: 5px #E8ECEC double;
            transition: width 2s;
        }

        .articles-content {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            color: #9ac1f0;
            border-bottom: none;
        }
        .name-font{
            border-bottom: none;
            font: initial;
        }
        .name-font :hover{
            border-bottom: none;
            font: initial;
        }

        // .articles-content :hover ::after{
        //     border-bottom: 5px #E8ECEC double;
        //     transition: width 2s;
        // }
        // .articles-item::after {
        //     content: '';
        //     display: block;
        //     /*开始时候下划线的宽度为100%*/
        //     width: 100%;
        //     height: 3px;
        //     position: absolute;
        //     bottom: -10px;
        //     background: #000;
        //     transition: all 0.3s ease-in-out;
        //     /*通过transform的缩放scale来让初始时x轴为0*/
        //     transform: scale3d(0, 1, 1);
        //     /*将坐标原点移到元素的中间，以原点为中心进行缩放*/
        //     transform-origin: 50% 0;
        //     box-sizing: border-box;
        // }

        // .articles-item:hover::after {
        //     /*鼠标经过时还原到正常比例*/
        //     transform: scale3d(1, 1, 1);
        // }

        // .article-name{
        //     color: #9ac1f0;
        // }

    }
}

.center-class {
    width: 600px;
    height: 100%;
    overflow: auto;
    border-radius: 5px;
    border: 1px #ffffff soild;
}

.right-class {
    width: 180px;
    height: 100%;
    overflow: auto;
    border-radius: 20px;
    border: 5px #ffffff soild;
}

body {
    margin: 0 !important;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

template {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
}
</style>
